<template>
  <div>
    <h1>App</h1>
    <p>count:{{ arr }}</p>
    <button @click="addAll">给每个数组的值加1</button>


    <p>count:{{ cat }}</p>
    <button @click="changeCat">狸猫换太子</button>

  </div>
</template>

<script lang="ts">
 import { defineComponent } from "vue"
  export default  defineComponent({
    name:'App',
    });
</script>

<script setup lang="ts">
import { reactive ,ref } from "vue";

let arr = reactive<number[]>([1,2,3,4])

const addAll = ()=>{
  // 一旦reative创建的数据是被替换的，则不再拥有响应式
  arr = arr.map((item)=>item+1)
}

// ref创建的数据被替换时，替换的是ref对象的value属性，是具有响应式的
const cat = ref({
  name:"maomi",
  age:3
})
console.log(cat);

const changeCat = ()=>{
  cat.value = {name:"taizi",age:5}
}

/* class RefImpl{
  //当ref对象被实例化的时候,就会把拿到的数据放在实例化对象的value属性上
  //当拿到的数据是基本类型值的时候,就直接放在了value属性上
  //当拿到的数据是对象类型值的,就会先创建当前对象的代理对象,然后再放在value属性上
  constructor(n){
    this.value = n
  }
  //RefImpl类有两个方法分别是getter和setter
  //当value属性的值被获取的时候,就会调用getter方法收集依赖
  //当value属性的值被设置的时候,就会调用setter方法通知依赖更新
  getter(){}
  setter(){}
} */



</script>

<style lang="less" scoped>
  
</style>
